<template>
  <div class="sebo-box button-unselected" :class="addClass(number.selected, number.color)">
    <div class="box-inner">
      <div class="box-top">
        <span class="context">{{number.number}}</span>
        <span class="parameter">{{number.parameter[this.activeSwitchIndex].number}}</span>
      </div>
      <div class="box-bottom">
        <span class="num-str">{{number.numbers}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    number: {
      type: Object,
      default: function() {
        return {
          id: 1,
          context: '红波',
          number: '1,2,8,12,13,18,19,23,24,29,30,34,35,40,45',
          selected: false,
          defaultClass: 'red',
          parameter: [
            {
              type: 'a',
              number: 9.75,
              context: 'A面',
            },
            { type: 'b',
              number: 10,
              context: 'B面'
            }
          ]
        }
      }
    },
    activeSwitchIndex: {
      type: Number,
      default: 0
    }
  },
  methods: {
    addClass(selected, className) {
      let classList = []
      if (selected) {
        classList.push('active')
      }
      if (className) {
        classList.push(className)
      }
      return classList.join(' ')
    },
  }
}
</script>

<style lang="stylus">
@import '~@/assets/styles/variables.styl'
  .sebo-box
    box-sizing border-box 
    padding 5px 10px
    border-radius 3px
    cursor pointer
    &.red
      .context 
        background $color-ball-red 
      &.active 
        background rgba($color-ball-red, 0.102)
        border 1px solid $color-ball-red
        .box-bottom 
          color $color-ball-red
    &.green
      .context 
        background $color-ball-green 
      &.active 
        background rgba($color-ball-green, 0.102)
        border 1px solid $color-ball-green
        .box-bottom 
          color $color-ball-green
    &.blue
      .context 
        background $color-ball-blue 
      &.active 
        background rgba($color-ball-blue, 0.102)
        border 1px solid $color-ball-blue
        .box-bottom 
          color $color-ball-blue
    .box-inner 
      width 100% 
      .box-top 
        display flex 
        align-items center
        justify-content space-between
        box-sizing border-box
        .context 
          width 60px 
          line-height 20px
          box-sizing border-box
          border-radius 10px;
          text-align center
          color #fff
        .parameter 
          color $color-theme-red
      .box-bottom 
        margin-top 5px
        text-align center
        color #8c8f98

</style>